---
title: ChangeNotifierProvider
---

import CodeBlock from "@theme/CodeBlock";
import todos from "!!raw-loader!/docs/providers/change_notifier_provider/todos.dart";
import todosConsumer from "!!raw-loader!/docs/providers/change_notifier_provider/todos_consumer.dart";
import { trimSnippet } from "../../../../../src/components/CodeSnippet";

:::caution
The content of this page may be outdated.  
It will be updated in the future, but for now you may want to refer to the content
in the top of the sidebar instead (introduction/essentials/case-studies/...)
:::

`ChangeNotifierProvider` (flutter_riverpod/hooks_riverpod only) is a provider that
is used to listen to and expose a [ChangeNotifier] from Flutter itself.

Using `ChangeNotifierProvider` is discouraged by Riverpod and exists primarily for:

- an easy transition from `package:provider` when using its `ChangeNotifierProvider`
- supporting mutable state, even though immutable state is preferred

:::info
Prefer using [NotifierProvider] instead.  
Consider using `ChangeNotifierProvider` only if you are absolutely certain
that you want mutable state.
:::

Using mutable state instead of immutable state can sometimes be more efficient.
The downside is, it can be harder to maintain and may break various features.  
For example, using `provider.select` to optimize rebuilds of your widgets
may not work if your state is mutable, as `select` will think that the value
hasn't changed.  
As such, using immutable data structures can sometimes be faster. Therefore
it is important to make benchmarks specific to your use-case, to make sure
that you are truly gaining performance by using `ChangeNotifierProvider`.

As a usage example, we could use `ChangeNotifierProvider` to implement a todo-list.
Doing so would allow us to expose methods such as `addTodo` to let the UI
modify the list of todos on user interactions:

<CodeBlock>{trimSnippet(todos)}</CodeBlock>

Now that we have defined a `ChangeNotifierProvider`, we can use it to interact
with the list of todos in our UI:

<CodeBlock>{trimSnippet(todosConsumer)}</CodeBlock>

[state_notifier]: https://pub.dev/packages/state_notifier
[statenotifierprovider]: ./state_notifier_provider
[notifierprovider]: ./notifier_provider
[changenotifier]: https://api.flutter.dev/flutter/foundation/ChangeNotifier-class.html
[provider]: ./provider
[futureprovider]: ./future_provider
